// 路由守卫

// 导入 router 实例
import router from '@/router'
// 导入 store 实例
import store from '@/store'

// 导入 nprogress 模块 （进入页面加载提示）
import NProgress from 'nprogress'
// 导入 nprogress 的样式
import 'nprogress/nprogress.css'

// 白名单数组,无需登录就可访问路由路径
const whiteList = ['/login', '/404']

// 注册全局前置守卫
router.beforeEach(async(to, from, next) => {
  // 开启进度条的加载提示
  NProgress.start()
  // 从 vuex 中获取 token
  const { token } = store.state.user
  //  判断
  if (token) { // 登录了
    // 如果还要去登录
    if (to.path === '/login') {
      // 没必要去了，去首页
      next('/')
      //   关闭进度条的加载提示
      NProgress.done()
    } else {
      // console.log('登录 -> 首页')
      // 获取用户信息的actio在这里调用
      // 注意：
      // 1.此项目核心在权限控制，就是不同员工登录进来看到的主页菜单不同
      // 2.如果员工登录成功了，已经跳转至主页在发请求，获取员工的角色权限太晚了
      // 3.获取员工的角色权限信息的时机是在跳转至主页之前，拿到当前的员工的角色信息，知道你是谁了
      // 有哪些权限，然后再对应的开放左侧菜单，这些操作都做完了，再让员工跳至首页，这个时候ta让
      // 看到的左侧菜单就是ta具备的权限
      // 4.只是现在还不知道如何开放对应的左侧菜单，这个先留着，大概的原理就是根据员工的决策列表信息
      // 动态筛选动态路由表即可实现

      // 这个地方代码当路由切换的时候会多次执行，会发起多次取消请求，需要优化
      // 如果没有用户信息，才发起请求
      // 第一种解决方式： 判断vuex中的userId有没有
      if (!store.state.user.userInfo.userId) {
        // await关键字的目的是等待action函数执行完毕，才继续往后执行（异步变同步）
        await store.dispatch('user/getUserInfoAction')
        // 这里拿到了用户信息，用户信息有个 userInfo.roles.menus可以拿到当前员工的角色列表
        // 这个角色列表数组中的字符串表明了当前员工可以看到的左侧菜单，今后基于这个数组对动态路由表
        // 做筛选，然后在跳至首页，这样首页展示的左侧菜单就是当前员工能看到的
        // console.log(666)
      }
      // // 第二种解决方式： 拿到action函数的返回值
      // 注意： 所有的action函数返回值都是Promise实例，要接收action函数的返回值，需要配合await关键字
      // const userObj = await store.dispatch('user/getUserInfoAction')
      // console.log(userObj)
      // 判断userObj是否存在userId，如果没有再发请求
      // 否则放行
      next()
    }
  } else { // 未登录
    // 进一步判断，要去的路由是否在白名单中
    if (whiteList.includes(to.path)) { // 如果在
      // 放行
      next()
    } else { // 否则
      // 跳转至登录，并携带回跳地址
      next(`/login?redirectUrl=${to.path}`)
      //   关闭进度条的加载提示
      NProgress.done()
    }
  }
})

// 注册全局后置守卫
router.afterEach(() => {
  // 关闭进度条的加载提示
  NProgress.done()
})
